body {
	  margin-top: 0px;
	  margin:0;
	  padding:0;
	  height:100%;  
}

/*estilo la barra de encabezado */
.navbar-header {
  background-color: #2faac0;
background-image: linear-gradient(45deg, #721c64 0%, #0b5c8b 52%, #33945d 90%);
  /*background-color:#004085;*/
  height:10vh;
  min-height: 80px;
}

/* fondo del menu de la barra en moviles   */
@media (max-width:767px) {
	.navbar-collapse {
    background-color: rgba(0, 0, 0, 0.76)!important;
    z-index: 10;
    margin-top: 15px;
    padding-left: 20px;
    padding-bottom: 10px;
	}	 
}



/*cambia el color del bt_primary */
.btn-primary {
  background-color:#06C;
}

.btn-opciones {
  background-color: #2faac0;
  background-image: linear-gradient(45deg, #721c64 0%, #0b5c8b 52%, #33945d 90%);
  color:white;
  border: none;
  padding: 10px 20px;
}

/* pie de pagina del sitio */
#footer {
  align-items: center;
  height:10vh;
  min-height: 80px;
  line-height:10vh;
  background:black;
  color:white;
  text-align:center;
  bottom:0;
  left:0;
  width:100%;
}


/* cambia el estilo del placeholder  */
*::-webkit-input-placeholder {
    /* Google Chrome y Safari */
    color:#999!important;	
}
*:-moz-placeholder {
    /* Firefox anterior a 19 */
    color:#999!important;	
}
*::-moz-placeholder {
    /* Firefox 19 y superior */
    color:#999!important;
}
*:-ms-input-placeholder {
    /* Internet Explorer 10 y superior */
    color:#999!important;
}


/* fondo con la imagen del index y paginas  */
.fondo {
  height: 80vh;
 /* width: 100vw;
  text-align: center;*/
  background-image:url(../images/background1.jpg);
  padding-top:40px;
  margin-top:-25px;
  position: relative;
}
/* para ver bien el fonde en los celulares */
@media (max-width:767px) {
	.fondo {
	  height: 100%!important;
	 min-height:100vh!important;
	}	 
}

/* para el tamaño de los avisos con alert  */
.aviso {
  width:25%;  
}
/* avisos en clulalres */
@media (max-width:767px) {
	.aviso {
	  width:90%!important;
	}
	 
}

/* para el tamaño de los formularios de ingreso, cambio y recupero de clave  */

@media (min-width:1280px) {
	.formulario {
	  width:30%!important;
	}	 
}
/*formularios en celulare */
@media (max-width:768px) {
	.formulario {
	  width:90%!important;
	}	 
}
/*formularios en tablets */
@media (min-width:768px) and (max-width:1280px){
	.formulario {
	  width:40%!important;
	}	 
}
/* para hacer responsive las imagenes de las noticias horizontal */
.img-noti {
	max-width: 100%;
	min-width: 130px;
	width: 255px;  /* asume que este es el tamaño por defecto */
  }
/* para que se vean bien los botones del index en los celulares */
@media (max-width:767px) {
	.row-panel {
	  width:100%!important;
	}	 
}

/* tamanio y estilo de los botones del index */
.btn-panel {
  width:90%; 
  border-width:5px; 
  background-color: rgba(4, 77, 40, 0);
  background-image: linear-gradient(to right,rgba(168, 0, 235, 0.23), rgb(0 92 235 / 23%), rgb(36 183 123 / 38%));
  border-color:#036;
}

/* tamanio y estilo de los botones del index seleccionado*/
.btn-panel:hover {
  color: rgb(27, 27, 27);
  width:90%; 
  border-width:5px; 
  /*background-color: rgba(0, 123, 255, .2);*/
  background-color: #2faac0;
  background-image: linear-gradient(45deg, #b035e0 0%, #2BD2FF 52%, #2BFF88 90%);
  border-color:linear-gradient(45deg, #b035e0 0%, #2BD2FF 52%, #2BFF88 90%);
}

/* color de los iconos de los formularios modales */
.form-modal {
	color:#004085;
    /*background-color: #72b4f6;*/
	background-color:#D3E2F5;
}


/* centra el contenido del pie de los modales */
.pie-modal {
	text-align:center!important;
	
}

/* para el select 2 */

/* para el checkbox  */
.mycheck1 {
  width: 28px;
  height: 28px;
  margin-top: 0px;
  position: absolute!important;
  margin-left: -2.25rem!important;
}

.mycheck {
  width: 28px;
  height: 28px;
  margin-top: 0px;
  position: absolute!important;
  margin-left: -2.25rem!important;
}

.mylabel {
  padding-left: 20;
  padding-top: 8;
}



/* para hacer responsive el texto de los h1 */
.titulo-responsive{
  font-size: clamp(1.0rem, 1.6vw, 1.8rem);
  color: rgb(105, 105, 106);
  font-weight: bold;
  }
  
  /* para hacer responsive el texto de los h6*/
  .titulo-responsive-h6{
    font-size: clamp(0.6rem, 0.9rem, 1.2rem);
    }
  
  /* para hacer responsive el texto de los h3*/
  .titulo-responsive-h3{
    font-size: clamp(0.8rem, 1.5vw, 1.8rem);
    }

    /* para hacer responsive el texto de los h3*/
  .titulo-responsive-h2{
    font-size: clamp(1.2rem, 1.9vw, 2.0rem);
    }
  
  /* para hacer responsive el texto de los parrafos p */
  .text-responsive{
    font-size: max(0.9rem, 0.8vw);
  }
  
  /* para la paginacion */
  
  @media (max-width: 767px) {
    .page-link {
      font-size: 0.9rem;
      box-shadow: 0 2px 8px #e4e4e4;
      border-radius: 8px;
      border: 0;
      margin: 3px;
      padding-left: 10px;
      padding-right: 10px;
      color: rgb(225, 218, 218)!important;
    
    }
    }
    
    
    
    @media (min-width: 768px) {
      .page-link {
        font-size: max(0.5rem, 1.2rem);
        box-shadow: 0 2px 8px #e4e4e4;
        border-radius: 8px;
        border: 0;
        margin: 5px;
        padding-left: 15px;
        padding-right: 15px;
        color: rgb(225, 218, 218)!important;
      
      }
    }
  
  a:link.page-link {
      color: rgb(175, 176, 178)!important;
      text-decoration: none;
      border: none;
    
  }

  /* fondo header y footer modal */
.fondo-modal {
  background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

}

.fondo-modal-runner {
  background-color: #2faac0;
background-image: linear-gradient(45deg, #d0d0f0 0%, #2BD2FF 52%, #2BFF88 90%);
}

.bar-tittle {
  margin-top: -22px!important;
  padding: 1.4rem 1rem!important;
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

.center-tittle {
  display: flex!important;
  justify-content: center!important;
  align-items: center!important;
}

/* para los iconos de los input y select */
.border-icon {
border:hidden;
background-color: rgba(4, 77, 40, 0);
background-image: linear-gradient(to right,rgba(168, 0, 235, 0.23), rgb(0 92 235 / 23%), rgb(36 183 123 / 38%));

}

/* para los titulos de los radio buttom */
.form-check-label {
  margin-bottom: 0;
  padding: 4px!important;
}

/* para los radio */
.form-check-inline .form-check-input {
  position: static;
  margin-top: 0!important;
  margin-right: 0!important;
  margin-left: 0!important;
}

/*para los que no tengan espacio abajo los formularios */
.form-card {
  text-align:center;
  margin-bottom: 0;
}

/*tablas sin espacios */
.table-ch td, .table-ch th {
    padding: .15rem!important;
    vertical-align:middle!important;
    border-top: 1px solid #dee2e6;
}

.celda-ch {
  padding: .15rem!important;
  vertical-align:middle!important;
  border-top: 1px solid #dee2e6;
}

/* whatsapp */
.btn-wsp{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:25px;
  right:25px;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:63px;
      height:63px;
      line-height: 66px;
}
}